<template>
  <div>
    <jsonInput ref="jsonInput"
               :value="jsonData"
               inputPlaceHolder="TT/A/B/C"
               @inputBlur="inputBlurHandler"
               @jsonBlur="jsonBlurHandler">
      <div slot="beforeInput">11111</div>
      <div slot="afterInput">22222</div>
      <div slot="beforeJsonEditor">3</div>
      <div slot="afterJsonEditor">4</div>
    </jsonInput>
  </div>
</template>

<script>
import jsonInput from '@/components/jsonInput'

export default {
  name: 'jsonInput-demo',
  components: { jsonInput },
  created() {},
  mounted() {
    this.jsonData = '{"label":"test"}'
  },
  data() {
    return {
      jsonData: ''
    }
  },
  methods: {
    jsonBlurHandler(value) {
      console.debug('jsonBlurHandler %s', value)
    },
    inputBlurHandler(value) {
      console.debug('inputBlurHandler %s', value)
    }
  }
}
</script>

<style scoped>
.editor-container {
  position: relative;
  height: 100%;
}
.components-container {
  margin: 30px 50px;
  position: relative;
}
</style>

